<div class="col-lg-6">
    <div class="panel panel-default">
        <div class="panel-body" style = "background: #CEE3F6">
		
		<div class="form-group col-xs-6"  style="margin-left:50%">
			</br><label style="color: rgb(224, 73, 1);"><span class="glyphicon glyphicon-asterisk" id="icon"/>&nbsp;Campos obligatorios</label>
		</div>
		
			<div class="col-xs-12"><h2>Nueva<b id="resaltador"> &nbsp;Asignatura</b></h2><br/><br/></div>
			<div class="col-xs-12">	
				<form id ="myForm" role="form" action="insertar_registro.php" onsubmit="return validar()" method="post">
					<div class="form-group col-xs-12">
						<label><span class="glyphicon glyphicon-asterisk" id="icon"/>Nombre&nbsp;</label>
						<input type="text" class="form-control" name="nombre" placeholder="Materia de Ejemplo I" required>
					</div>
					<div class="col-xs-12"></div>
					<div class="form-group col-xs-3" id="codigo">
						<label><span class="glyphicon glyphicon-asterisk" id="icon"/>Código&nbsp;</label>
						<input type="text" min = "0" class="form-control col-xs-6 has" name="codigo" placeholder="0000" required>
					</div>
					<div class="form-group col-xs-9">
						<label><span class="glyphicon glyphicon-asterisk" id="icon"/>Tipo&nbsp;</label>
						<select class="form-control"name ="tipo" required>
							<option></option>
							<option>Obligatoria</option>
							<option>Electiva</option>
							<option>Optativa</option>
							<option>Complementaria</option>
						</select>
					</div>
					<div class="col-xs-12"></div>
					<div class="form-group col-xs-3" id="creditos">
						<label><span class="glyphicon glyphicon-asterisk" id="icon"/>Cr&eacute;ditos&nbsp;</label>
						<input type="number" min="1" max="6" value="1" class="form-control" name="creditos" required>
					</div>
					<div class="form-group col-xs-9">
						<label><span class="glyphicon glyphicon-asterisk" id="icon"/>Opci&oacute;n Profesional&nbsp</label>
						<select class="form-control"name ="profesional" required>
							<option></option>
							<option>Ciclo B&aacute;sico</option>
							<option>Aplicaciones con la Tecnolog&iacute;a Internet</option>
							<option>Base de Datos</option>
							<option>C&aacute;lculo Cient&iacute;fico y Tecnol&oacute;gico</option>
							<option>Computaci&oacute;n Gr&aacute;fica</option>
							<option>Computaci&oacute;n Paralela y Distribuida</option>
							<option>Ingenier&iacute;a del Software e Interacci&oacute;n Humano-Computador</option>
							<option>Inteligencia Artificial</option>
							<option>Laboratorio General</option>
							<option>Modelos y Programaci&oacute;n Matem&aacute;tica</option>
							<option>Sistemas de Información</option>
							<option>Tecnolog&iacute;as Educativas</option>
							<option>Tecnolog&iacute;as en Comunicaci&oacute;n y Redes de Computadora</option>
						</select>
					</div>
					<div class="col-xs-12"></div>
					<div class="form-group col-xs-3">
						<label>Semestre</label>
						<select class="form-control"name ="semestre">
							<option></option>
							<option>I</option>
							<option>II</option>
							<option>III</option>
							<option>IV</option>
							<option>V-IX</option>
							<option>VI-IX</option>
							<option>VII-IX</option>
							<option>VIII-IX</option>
						</select>
					</div>
					<div class="form-group col-xs-9">
						<label><span class="glyphicon glyphicon-asterisk" id="icon"/>Centro de Investigaci&oacute;n</label>
						<select class="form-control" name ="centro">
							<option></option>
						</select>
					</div>
					<div class="col-xs-12"></div>
					<div class="form-group col-xs-8">
			          	<label><span class="glyphicon glyphicon-asterisk" id="icon"/>Ofertada&nbsp;</label>
			          	<div>
							<input type="radio" name="ofertada" value="Si" checked>&nbsp;Si &nbsp;&nbsp;&nbsp;
							<input type="radio" name="ofertada" value="No">&nbsp;No
						</div>
					</div>
					
					<div class="col-xs-12"></br></div>
					<div class="col-xs-4"></div>
					<div class="col-xs-4">	
						<button type="submit" id="letra_boton" class="btn btn-primary form-control">Agregar</button>
					</div>
					<div class="col-xs-4"></div>
					<div class="col-xs-12"></br></div>
					<input type="hidden" name="tabla" value="asignatura">
				</form>
			</div>	
   	 	</div>
	</div>
</div>

<script>
$('[name=codigo]').keyup(function (e) {
	var code = $(this).val(); 
	if(/^[0-9]+$/.test(code) && code >= 0 && code < 10000){
		$.post('validaciones.php', {'codigo':code}, function(data) {
			if(data=='NO'){$("#codigo").addClass("has-error");}
			else $("#codigo").removeClass("has-error");
		});
	}
	else $("#codigo").addClass("has-error");

});

$.ajax({type:"POST",url:"cargar_centros.php",success:function(result){$("[name=centro]").html(result);}});

$('[name=creditos]').keyup(function (e) {
	if($('[name=creditos]').val() < 1 || $('[name=creditos]').val() > 6) {$("#creditos").addClass("has-error");}
	else $("#creditos").removeClass("has-error");
});

function validar()
{
	var code = $('[name=codigo]').val();
	if(!(/^[0-9]+$/.test(code) && code >= 0 && code < 10000)) alert("Uno o más campos inválidos!\nVerífiquelos antes de continuar.");
	return (/^[0-9]+$/.test(code) && code >= 0 && code < 10000);
}

$("#agregar").click(function(){return confirm("¿Está seguro que desea continuar?")});
</script>